<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模拟微信对话</title>
<style>
body,
p,
input {
    margin: 0;
    padding: 0;
}
img {
    border: none;
    vertical-align: top;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.box {
    width: 190px;
    height: 398px;
    background: url(iphone2.png) no-repeat;
    margin: 0 auto;
    padding: 56px 14px 0;
}
#wrap {
    width: 184px;
    height: 310px;
    line-height: 20px;
    padding: 4px;
    background: #fafafa;
    overflow: auto;
}
#text {
    width: 118px;
}
p {
    position: relative;
    margin-bottom: 6px;
    word-break: break-all;
    word-wrap: break-word;
    overflow: auto;
}/*强制换行，不然会都连着*/
p img {
    position: absolute;
    top: 0;
}
p span {
    font-size: 12px;
}
.left {
    padding-left: 24px;
}
.right {
    padding-right: 24px;
}
.left img {
    left: 0;
} /*如果头像不用定位的话，下次的语句会接在上一句的最后一个字后边*/
.right img {
    right: 0;
}
.left span {
    float: left;
    background: #ffff62;
}
.right span {
    float: right;
    background: #0fb1ff;
}
</style>
<script>
window.onload = function (){
	var oWrap = document.getElementById('wrap');
	var oImg  = document.getElementById('img1');
	 var oText = document.getElementById('text');
	 var oSent = document.getElementById('sent');
	 var onOff = true;

	//输入框获取焦点
	oText.onfocus = function () {
		if (this.value == '点击头像聊天') {
			oText.value = '';
		};
	}

	//头像切换
	oImg.onclick = function (){
	  	if(onOff){
	   		oImg.src = '2.png';
	   		onOff = false;
	  	}else{
	   		oImg.src = '1.png';
	   		onOff = true;
	  	}
	};

	//发送
	oSent.onclick = function (){
	  	if(onOff){
	   		posClass = 'left';
	 	}else{
	   		posClass = 'right';
	  	}

	  	oWrap.innerHTML += '<p class="' +posClass+ '">'+
	   		'<img src="' +oImg.src+ '">'+
	   		'<span>' + oText.value + 
	   		'</span>'+
	   		'</p>';

	   	oText.value = '';
	};
}
</script>
</head>
<body>
<div class="box">
  <div id="wrap"> 
    <!--<p class="left">
			<img src="">
			<span></span>	
		</p>
        
		<p class="right">
			<img src="">
			<span></span>
		</p>--> 
  </div>
  <img id="img1" src="1.png">
  <input id="text" type="text" value="点击头像聊天">
  <input id="sent" type="button" value="发送">
</div>
</body>
</html>